<template>
  <div class="mall-container">
    <title-bar
      bgcolor="transparent"
      use-toggle
    >
      <van-search
        :value="value"
        placeholder="请输入搜索关键词"
        use-action-slot
        bind:search="onSearch"
      >
        <view
          slot="action"
          bind:tap="onSearch"
        >搜索</view>
      </van-search>
    </title-bar>
    <scroll-view
      scroll-y
      refresher-enabled
      refresher-default-style="none"
      refresher-background="lightgreen"
      :refresher-triggered="triggered"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      class="scroll-container"
    >
      <view
        slot="refresher"
        class="refresh-container"
        style="display: block; width: 100%; height: 80px; background: blue; display: flex; align-items: center;"
      >
        <view
          class="view1"
          style="position: absolute; text-align: center; width: 100%;"
        >
          下拉刷新
        </view>
      </view>

      <view
        v-for="(item,index) in arr"
        :key="index"
        style="display: flex; height: 100px;"
      >
        <image src="https://images.unsplash.com/photo-1565699894576-1710004524ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1832&q=80"></image>
        <image src="https://images.unsplash.com/photo-1566402441483-c959946717ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"></image>
        <image src="https://images.unsplash.com/photo-1566378955258-7633cb5c823e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"></image>
        <image src="https://images.unsplash.com/photo-1566404394190-cda8c6209208?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=630&q=80"></image>
        <image src="https://images.unsplash.com/photo-1566490595448-be523b4d2914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=958&q=80"></image>
      </view>
    </scroll-view>
  </div>
</template>

<script>
import Price from '@/components/price'
import TitleBar from '@/components/bar/title'
import FullScreen from '@/components/layout/fullScreen'
import PanelEnroll from '@/components/panel/enroll'
export default {
  components: {
    Price,
    TitleBar,
    FullScreen,
    PanelEnroll
  },

  data () {
    return {
      arr: [],
      triggered: false,
      freshing: false
    }
  },
  beforeMount () {
    this.onReady()
  },
  methods: {
    onReady () {
      const arr = []
      for (let i = 0; i < 100; i++) {
        arr.push(i)
      }
      this.arr = arr
      setTimeout(() => {
        this.triggered = true
      }, 1000)
    },

    onPulling (e) {
      console.log('onPulling:', e)
    },

    onRefresh () {
      if (this.freshing) return
      this.freshing = true
      this.triggered = true
      setTimeout(() => {
        this.triggered = false
        this.freshing = false
      }, 3000)
    },

    onRestore (e) {
      console.log('onRestore:', e)
    },

    onAbort (e) {
      console.log('onAbort', e)
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.mall-container {
  padding-top: 60px;
  position: relative;
  background: #f1f2f3;
  height: 100%;
}
.scroll-container {
  height: 100%;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.mall-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
</style>
